// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//cnpm install axios --save
import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Routers from './routers'
import ElementUI from 'element-ui';
import axios from 'axios'
import api from './api/index.js'
import 'element-ui/lib/theme-chalk/index.css';
//导出自定义的样式
import '@/styles/index.scss'

Vue.config.productionTip = false
//使用vue-resource插件请求http
Vue.use(VueResource)
//使用路由
Vue.use(VueRouter)
//使用elementUI
Vue.use(ElementUI);
//设置全局axios
Vue.prototype.$axios = axios
// 将API方法绑定到全局
Vue.prototype.$api = api


//自定义指令（全局）
// Vue.directive("rainbow", {
//   bind(el, binding, vnode) {
//     el.style.color = "#" + Math.random().toString(16).slice(2, 8)
//   }
// })
Vue.directive("theme", {
  bind(el, binding, vnode) {
    if (binding.value == 'wide') {
      el.style.maxWidth = "1260px"
    } else if (binding.value == 'narrow') {
      el.style.maxWidth = "560px"
    }
    if (binding.arg == "column") {
      el.style.background = "#6677cc"
      el.style.padding = "20px";
    }
  }
})

//自定义过滤器（全局过滤器）
//将show-blogs标题转换为大写
// Vue.filter("to-uppercase", function (value) {
//   return value.toUpperCase()
// })
// 将博客内容减短
// Vue.filter("snippet", function (value) {
//   return value.slice(0, 100) + "..."
// })


//创建路由
const router = new VueRouter({
  routes: Routers,
  mode: "history"
})

router.beforeEach((to, from, next) => {
  if(to.path === '/login'){
    sessionStorage.removeItem('user');
  }
  var user = sessionStorage.getItem('user');
  if(!user && to.path !== '/login'){
    next({
      path: '/login'
    })
  }else{
    next();
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {App},
  template: '<App/>',
  //注意router不要写错
  router: router
})
